<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont"></span>
        </div>
        <div class="header-middle">
            <span class="iconfont search-icon"></span>
            <div class="kw">输入城市/景点/游玩主题</div>
            <input type="text" class="header-input">
        </div>
        <div class="head-right">
            <span class="iconfont"></span>
        </div>
    </div>
</template>
<script>
export default {
    name:'HomeHeader'
}
</script>
<style lang="stylus" scoped>
    .header{
        display:flex;
        width:100%;
        height:100px;
        color:#fff;
        background-color: #f40;
    }
    .header .header-left{
        width: .8rem;
        height: 100%;
        text-align: center;
        line-height:.88rem;
    }
    .header .header-middle{
        position relative
        flex: 1;
        margin: .14rem 0;
    }
    .header .header-middle .search-icon{
        position:absolute;
        top: .13rem;
        left: .2rem;
        color: #e4e7ea;
    }
    .header .header-middle .kw{
        position:absolute;
        top: .16rem;
        left: .65rem;
        color: #e4e7ea;
    }
    .header .header-middle .header-input{
        width: 100%;
        height: 100%;
        border-radius: .06rem;
    }
    .header .header-right{
        min-width:1.12rem;
        padding:0 .1rem
        height:100%;
        text-align: center;
        line-height: .88rem;
        color: #fff;
    }
</style>